<template>
  <div class="voice-play" :class="options.align">
    <div
      v-if="options.isBox"
      class="voice voice-has-box"
      :style="{ width: options.width, height: options.height, background: options.background }"
      @click="handle"
    >
      <!-- <div
        class="triangle"
        :style="{ borderRight: '5px solid ' + options.background }"
      ></div> -->
      <!-- 语音播放 wifi小图标 -->
      <VoiceIcon :color="options.color" :switch="audio.playing" />
      <p :style="{ color: options.color }"><slot></slot></p>
    </div>
    <VoiceIcon class="voice" v-else :color="options.color" :switch="audio.playing" @click="handle" />

    <VoiceAudio ref="VoiceAudio" :src="src" @init="audioInit" />
  </div>
</template>

<script>
import VoiceIcon from './components/VoiceIcon'
import VoiceAudio from './components/Audio'
/**
 * 音频播放组件
 * @author 朱琦（1972662943@qq.com）
 * @date   时间：2021/12/29
 * https://segmentfault.com/a/1190000012453975
 */
export default {
  name: 'VoicePlay',
  props: {
    src: {
      type: String,
      require: true
    },
    // 配置参数
    options: {
      type: Object,
      default: () => {
        return {
          isBox: true,
          width: '1rem',
          height: '0.2rem',
          background: '#266bf4',
          color: '#fff',
          align: 'left'
        }
      }
    }
  },
  components: {
    VoiceIcon,
    VoiceAudio
  },
  data() {
    return {
      audio: {}
    }
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    /**
     * 点击
     */
    handle() {
      if (this.audio.playing) {
        // 暂停
        this.$refs.VoiceAudio.pause()
      } else {
        // 播放
        this.$refs.VoiceAudio.play()
        this.$refs.VoiceAudio.setCurrentTime(0)
      }
    },
    audioInit(audio) {
      this.audio = audio
    }
  }
}
</script>

<style scoped lang="less">
.voice-play {
  margin: 5px 0;
  display: flex;
  .voice {
    cursor: pointer;
    display: inline-block;
    position: relative;
    padding: 4px;
    border-radius: 10px;
    &.voice-has-box {
      border-radius: 10px;
      width: 100px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      p {
        margin-right: 5px;
      }
    }
    .triangle {
      height: 0;
      width: 0;
      border: 5px solid transparent;
      position: absolute;
      left: -9px;
      top: 50%;
      margin-top: -5px;
      display: inline-block;
    }
  }
  &.right {
    text-align: right;
    justify-content: flex-end;
    .voice-has-box {
      flex-direction: row-reverse;
    }
    .triangle {
      right: -9px;
      left: auto;
      transform: rotate(180deg);
    }
    .voice-icon /deep/ ul {
      transform: rotate(135deg);
    }
  }
  .voice-icon {
    transform: scale(0.4);
    /deep/ ul {
      height: 33px;
    }
  }
}
</style>
